<template>
  <SplitPanel class="dictionary">
    <template #left-content>
      <a-menu
        id="dddddd"
        v-model:openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        style="width: 240px"
        mode="inline"
        :items="dictionData"
        @click="handleClickItem"
      ></a-menu>
    </template>
    <template #right-content>
      <DynamicTable
        bordered
        show-index
        :data-request="loadData"
        :columns="columns"
        row-key="id"
        @resize-column="handleResizeColumn"
        :pagination="false"
        :search="false"
      >
      </DynamicTable>
    </template>
  </SplitPanel>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { SplitPanel } from '@/components/basic/split-panel';
  import { baseColumns, type TableListItem } from './columns';
  import { getTableListApi } from '@/api/base/dictionary/index';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';

  const [DynamicTable, dynamicTableInstance] = useTable();
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 130,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          ifShow: record.userLogin !== '系统默认',
          label: '编辑',
          onClick: () => console.log('111'),
        },
        {
          ifShow: record.userLogin !== '系统默认',
          label: '删除',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];
  const selectedKeys = ref<string[]>(['dept_type']);
  const openKeys = ref<string[]>(['dept_type']);
  const dictionData = [
    {
      key: 'dept_type',
      label: '项目管理',
      children: [
        {
          key: 'dept_type_one',
          label: '项目性质配置',
        },
        {
          key: 'dept_type_two',
          label: '地质类型',
        },
      ],
    },
    {
      key: 'task_type',
      label: '设备/机台管理',
      children: [],
    },
    {
      key: 'check_type',
      label: '采购管理',
      children: [],
    },
    {
      key: 'check_mode',
      label: '耗材管理',
      children: [],
    },
    {
      key: 'from_type',
      label: '物资盘点',
      children: [],
    },
    {
      key: 'id_type',
      label: '企业基础配置',
      children: [],
    },
  ];
  const configType = ref('dept_type');

  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          configName: '配件供应商',
          configType: '自定义',
        },
        {
          id: '2',
          configName: '设备供应商',
          configType: '自定义',
        },
      ],
      searchCount: true,
      size: 10,
      total: 2,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };

  const handleResizeColumn = (w, col) => {
    col.width = w;
  };

  const handleClickItem = (e) => {
    dynamicTableInstance?.reload?.();
  };
</script>
<style scoped lang="less">
  .dictionary {
    padding: 20px;
    .ant-menu-light.ant-menu-root.ant-menu-inline,
    .ant-menu-light.ant-menu-root.ant-menu-vertical {
      border-inline-end: 0;
    }
  }
</style>
